<template>
  <el-form
    class="resume-edit"
    ref="form"
    :model="formData"
    :rules="rules"
    :label-suffix="$t('tip.colon')"
    label-width="120px"
    label-position="top"
  >
    <div class="resume-edit-title">编辑自我评价</div>
    <el-form-item prop="selfEvaluation" :label="$t('resume.selfEvaluation')">
      <el-input
        type="textarea"
        :rows="10"
        v-model="formData.selfEvaluation"
        :placeholder="$tInput()"
      />
    </el-form-item>
    <div class="resume-edit-btns">
      <el-button
        size="small"
        type="primary"
        :loading="submiting"
        @click="submitForm"
        >保存并更新</el-button
      >
      <el-button size="small" type="info" @click="$emit('edit')">{{
        $t('action.cancel')
      }}</el-button>
    </div>
  </el-form>
</template>

<script>
import { updateSelfEvaluation } from 'services/student/resume'
export default {
  name: 'ResumeEvaluationEdit',
  props: {
    data: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      formData: {
        selfEvaluation: ''
      },
      submiting: false
    }
  },
  computed: {
    rules() {
      return {
        selfEvaluation: this.$rule('resume.selfEvaluation', {
          required: true
        })
      }
    }
  },
  methods: {
    async submitForm() {
      try {
        await this.$refs.form.validate()
        this.submiting = true
        await updateSelfEvaluation(this.formData)
        this.$emit('edit')
        this.$bus.$emit('resume-update')
      } catch {
      } finally {
        this.submiting = false
      }
    }
  },
  created() {
    this.formData.selfEvaluation = this.data
  }
}
</script>
